<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { ComTabMenu } from '../../types/com-tab-menu';
	import { safePaddingStyle, safeAreaInsetsTop } from '../../utils/system';
	import { DATA_MAIN_EXPLORE_LOCATION, DATA_MAIN_MENUS } from "../../utils/data";

	const tabIndex = ref(0)
	const handleChangeTabIndex = (index : number) => {
		tabIndex.value = index
	}
	import { useI18n } from 'vue-i18n'
	import { storageKey } from '../../common/constants'
	const { locale } = useI18n()
	onMounted(() => {
		const localeStorage = uni.getStorageSync(storageKey.locale)
		locale.value = localeStorage.length === 0 ? 'zh-Hans' : localeStorage
	})
</script>
<template>
	<view class="main-container" :style="safePaddingStyle()">
		<business-main-home v-if="tabIndex === 0" class="tab-view"></business-main-home>
		<business-main-hot v-if="tabIndex === 1" class="tab-view"></business-main-hot>
		<business-main-message v-if="tabIndex === 3" class="tab-view"></business-main-message>
		<business-main-mine v-if="tabIndex === 4" class="tab-view"></business-main-mine>
		<com-tabs :tabs="DATA_MAIN_MENUS" :init-tab-index="0" @onChange="handleChangeTabIndex"
			:themeInvert="tabIndex === 1"></com-tabs>
	</view>
	<view class="safe-area" :style="{height: `${safeAreaInsetsTop}px`}"></view>
</template>
<style scoped lang="scss">
	.safe-area {
		position: absolute;
		top: 0;
		left: 0;
		background-color: black;
		z-index: 999;
		width: 100vw;
	}

	.main-container {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.tab-view {
			flex: 1;
			overflow: scroll;
		}
	}
</style>